﻿<html>
<head>
    <meta charset="utf-8" />
    <link href="css/bootstrap.css" rel="stylesheet" />
    <link href="css/bootstrap-theme.css" rel="stylesheet" />
    <script src="js/jquery_2_1_min.js"></script>
    <script src="js/FastHttpApi.js"></script>
    <script src="js/apis.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <title>FastHttpApi WebSocket</title>
</head>
<body>

    <div class="container bs-docs-container">
        <div class="row">
            <nav class="navbar navbar-default">
                <div class="container-fluid">
                    <!-- Brand and toggle get grouped for better mobile display -->
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                            <span class="sr-only"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="#">FastHttpApi Chat room sample</a>
                    </div>

                    <!-- Collect the nav links, forms, and other content for toggling -->

                </div><!-- /.container-fluid -->
            </nav>



            <ul class="nav nav-tabs">
                <li role="presentation" class="active"><a href="#">聊天室</a></li>
                <li role="presentation"><a href="admin.html">管理</a></li>

            </ul>

            <form class="form-inline" style="padding-top:10px;" id="loginBar">
                <div class="form-group">
                    <label for="exampleInputName2">昵称</label>
                    <input type="text" class="form-control" id="userName" placeholder="昵称">
                </div>

                <button onclick="login()" type="button" class="btn btn-default">登陆</button>
            </form>
            <div class="row">
                <br />
                <div class="col-md-3" role="main">
                    <div class="panel panel-default">
                        <div class="panel-heading">房间</div>
                        <div class="panel-body">
                            <form>
                                <div class="form-group">

                                    <input type="email" class="form-control" id="roomName" placeholder="房间名称">
                                </div>
                                <button type="button" onclick="createRoom()" class="btn btn-default">创建房间</button>
                            </form>
                            <hr />
                            <div id="lstRoom" class="list-group" style="height:405px;overflow: auto; overflow-x:hidden;">
                                <a href="javascript:void(0)" v-for="item in Data" v-on:click="selectRoom(item.Name)" class="list-group-item">{{item.Name}}</a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-6" role="main">
                    <div class="panel panel-default">
                        <div class="panel-heading" id="roomTitle">聊天记录</div>
                        <div class="panel-body">
                            <div id="lstTalk" style="height:500px;overflow: auto; overflow-x:hidden;">
                                <p v-for="item in Data" style="padding-top:4px;">
                                    <span class="label label-default" style="margin-right:4px;">
                                        [{{item.Time}}]{{item.Name}}
                                    </span>
                                        <span class="label label-success" v-if="item.Type=='CheckIn'">
                                            {{item.Message}}
                                        </span>
                                        <span class="label label-warning" v-else-if="item.Type=='CheckOut'">
                                            {{item.Message}}
                                        </span>
                                        <span class="label label-info" v-else>
                                            {{item.Message}}
                                        </span>
</p>
                            </div>
                            <form class="form-inline" id="talkBar">
                                <div class="form-group">
                                    <input type="text" style="width:300px;" class="form-control" id="talkMsg" placeholder="发言">
                                </div>
                                <button type="button" onclick="sendMessage()" class="btn btn-default">发送</button>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="col-md-3" role="main">
                    <div class="panel panel-default">
                        <div class="panel-heading">房间用户</div>
                        <div class="panel-body">
                            <div style="height:550px;overflow: auto; overflow-x:hidden;">
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th>Name</th>
                                            <th>IPAddress</th>
                                        </tr>
                                    </thead>
                                    <tbody id="lstUser">
                                        <tr v-for="item in Data">
                                            <td>{{item.Name}}</td>
                                            <td>{{item.Address}}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>

        var loginStatus = false;
        var activeRoom;
        var lstRoomControl;
        var lstUserControl;
        var lstTalkControl;
        $(document).ready(function () {
            lstRoomControl = new Vue({
                el: '#lstRoom',
                data: { Data: [] }
            });
            lstUserControl = new Vue(
                {
                    el: '#lstUser',
                    data: { Data: [] }
                }
            );
            lstTalkControl = new Vue({
                el: '#lstTalk',
                data: { Data: [] }
            });
            listRoom();
            $('#talkBar').hide();
        });

        async function createRoom() {
            if (!$('#roomName').val()) {
                alert('请输入创建房间名称!');
                return;
            }
            var result = await ChatCreateRoom($('#roomName').val());
            if (result.Code != 200) {
                alert(result.Error);
            }
            else
                listRoom();
        }
        async function sendMessage() {
            if (!$('#talkMsg').val()) {
                alert('请输入发言的内容！');
                return;
            }
            var result = await ChatSendMessage($('#talkMsg').val());
            if (result.Code == 200) {
                $('#talkMsg').val('');
            }
            else {
                alert(result.Error);
            }
        }

        async function login() {
            if (!$('#userName').val() || $('#userName').val().toLowerCase() == 'admin') {
                alert('登陆名称无效！');
                return;
            }
            var result = await ChatLogin($('#userName').val());
            if (result.Code != 200) {
                alert(result.Error);
            }
            else {
                alert("登陆成功");
                lstTalkControl.Data = [];
                $('#loginBar').hide();
                $('#lstbody').empty();
                loginStatus = true;
                activeRoom = null;
                listRoom();
            }
        }

        async function listRoomUsers() {
            if (loginStatus == true && activeRoom) {
                var result = await ChatGetRoomOnlines(activeRoom);
                lstUserControl.Data = result.Data;
            }
        }

        async function selectRoom(name) {

            if (loginStatus == true) {
                if (name == activeRoom)
                    return;
                console.log("select room " + name);
                if (activeRoom) {
                    console.log("checkout " + activeRoom);
                    await ChatCheckOutRoom(activeRoom);
                }
                activeRoom = name;
                $('#roomTitle').html('进入房间:' + activeRoom);
                lstTalkControl.Data = [];
                var result = await ChatCheckInRoom(name);
                if (result.Code == 200) {
                    $('#talkBar').show();

                    listRoomUsers();
                }
                else {
                    alert(result.Error);
                }
            }
        }
        async function listRoom() {
            var result = await ChatListRooms();
            lstRoomControl.Data = result.Data;
        }

        function GetTime() {
            var now = new Date();
            return now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds();
        }
        api_connect(async function () {
            listRoom();
        });
        api_receive(function (result) {
            console.log(JSON.stringify(result));
            switch (result.Data.Type) {
                case "Talk":
                    lstTalkControl.Data.push({ Type: 'Talk', Time: GetTime(), Name: result.Data.Name, Message: ' 说:' + result.Data.Message });
                    break;
                case "CheckIn":
                    lstTalkControl.Data.push({ Type: 'CheckIn', Time: GetTime(), Name: result.Data.Name, Message: ' 进入房间' });
                    listRoomUsers();
                    break;
                case "CheckOut":
                    lstTalkControl.Data.push({ Type: 'CheckOut', Time: GetTime(), Name: result.Data.Name, Message: ' 退出房间' });
                    listRoomUsers();
                    break;
                case "Delete":
                    if (result.Data.Room == activeRoom) {
                        alert('房间已关闭！');
                        $('#talkBar').hide();
                        lstTalkControl.Data = [];
                        activeRoom = null;
                    }
                    listRoom();
                    break;
                case "CreateRoom":
                    listRoom();
                    break;
            }
            var objDiv = document.getElementById("lstTalk");
            objDiv.scrollTop = objDiv.scrollHeight;
        });
        api_disconnect(function () {
            $('#loginBar').show();
            $('#talkBar').hide();
            loginStatus = false;
        });
    </script>
</body>

</html>